<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AO装置</title>
    <link rel="stylesheet" href="${request.contextPath}/layui/css/layui.css"  media="all">
</head>
<style type="text/css">
    .staff-font-color{
        color: #0183FA;
    }
    .contractor-font-color{
        color: #DC87FE ;
    }

    .device-font-color{
        color: #8664FF  ;
    }


    .reportAnEmergency-color{
    /*background-color: #de0909;*/
    color: #f54560;
    }

    .layui-table[lay-even] tr:nth-child(even) {
        /* background-color: #aaffaa; */
        background-color: #edf1f6;
    }
    .lay-form{
        padding: 2px;
    }
    .grid-demo .grid-demo-bg1{
        padding: 10px;
    }

</style>
<body style="background-color: #fbfbfb">
<blockquote class="layui-elem-quote">
    <strong style="font-size: 24px">巴斯夫化工有限公司—AO装置在厂人员总数：<strong id="totol" class="staff-font-color">0</strong>人</strong>
    <button type="button" lay-submit="" class="layui-btn layui-btn-warm" id="exportExceTotal" name="exportExcel" style="float: right;background-color: #0183FA">
        <i class="layui-icon"></i>导出</button>
</blockquote>

<div class="layui-row">
    <div class="layui-col-xs6" style="padding-left: 8px;padding-right: 4px;">

        <div class="grid-demo grid-demo-bg1" style="border-radius: 10px;border:1px solid #d6dbfa;padding-left: 2px;padding-right: 2px;">
            <blockquote class="layui-elem-quote1" >
                <strong style="font-size: 18px">装置：<strong id="plantTotol" class="device-font-color">0</strong>&nbsp;&nbsp;人</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <strong style="font-size: 18px">员工：<strong id="plantEmployees" class="staff-font-color">0</strong>&nbsp;&nbsp;人</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <strong style="font-size: 18px">承包商：<strong id="plantContractor" class="contractor-font-color">0</strong>&nbsp;&nbsp;&nbsp;人</strong>
            </blockquote>
            <table class="layui-hide" id="test1"  lay-filter="test1">

            </table>
        </div>
        <div class="grid-demo grid-demo-bg1" style="border-radius: 10px;border:1px solid #d6dbfa;margin-top:10px;padding-left: 2px;padding-right: 2px;">
            <blockquote class="layui-elem-quote1" >
                <strong style="font-size: 18px">承包商休息区：<strong id="ontractorTotol" class="device-font-color">0</strong>&nbsp;&nbsp;人</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <strong style="font-size: 18px">员工：<strong id="contractorEmployees" class="staff-font-color">0</strong>&nbsp;&nbsp;人</strong>&nbsp;&nbsp;
                <strong style="font-size: 18px">承包商：<strong id="contractorContractor" class="contractor-font-color">0</strong>&nbsp;&nbsp;&nbsp;人
                </strong>
            </blockquote>
            <table class="layui-hide" lay-filter="test3" id="test3"></table></div>
    </div>
    <div class="layui-col-xs6" style="padding-left: 8px;padding-right: 4px;">
        <div class="grid-demo grid-demo-bg1" style="border-radius: 10px;border:1px solid #d6dbfa;padding-left: 2px;padding-right: 2px;">
            <blockquote class="layui-elem-quote1" >
                <strong style="font-size: 18px">COB：<strong id="cobTotol" class="device-font-color">0</strong>&nbsp;&nbsp;人</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <strong style="font-size: 18px">员工：<strong id="cobEmployees" class="staff-font-color">0</strong>&nbsp;&nbsp;人</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <strong style="font-size: 18px">承包商：<strong id="cobContractor" class="contractor-font-color">0</strong>&nbsp;&nbsp;&nbsp;人</strong>
            </blockquote>
            <table   id="test"  class="lay-form" lay-filter="test"></table>
        </div>

    </div>
</div>
<script src="${request.contextPath}/layui/jquery/jquery.min.js" charset="utf-8"></script>
<script src="${request.contextPath}/layui/layui.js" charset="utf-8"></script>
<script>

    var leftTableHeight = (window.innerHeight) /2 - 117 ;
    var TableinnerWidth = (window.innerWidth) /2 - 180 ;
    var initval =12;
    layui.use('table', function(){
        // peopleCounting()
        var table1 = layui.table;
        var table3 = layui.table;
        var table = layui.table;
       var numberOfEmployeestable=  table.render({
            elem: '#test',
             id:'test'
            ,url:'/cob',
           title: 'cob'
             ,loading: false
            ,height: (window.innerHeight) -146
           ,cols: [[{field:'userName',width:TableinnerWidth/4,align:"center",title: '用户名'}
               ,{field:'company', width:TableinnerWidth/4, align:"center",title: '部门'}
               ,{field:'inTime', width:TableinnerWidth/4,align:"center",title: '入场时间'}
               ,{field:'name', width:TableinnerWidth/4,align:"center",title: '门禁位置'}
            ]],
         page: false,
           done: function (res, curr, count) {// 表格渲染完成之后的回调
               $.each(res.data, function(i, val) {
                   if(val.intervals >= initval ) {		//此处写你自己的判断条件
                       $('tr[data-index="' + i + '"]').addClass('reportAnEmergency-color');
                   }
               });
           },
           even:true
          ,response: {
            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
        }
           ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
               peopleCounting()
         return {
                "code": 200, //解析接口状态
                "msg": '', //解析提示文本
                "count": res.length, //解析数据长度
                "data": res //解析数据列表
            };
        }
        });

        var $ = layui.$, testactive = {
            reload: function(){
                var demoReload = $('#demoReload');

                //执行重载
                table.reload('test', {
                   where: {
                        userNoOrUsername:
                           demoReload.val()
                    }
                });
            }
        };

        $(' .demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            testactive[type] ? testactive[type].call(this) : '';
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('rowDouble(test)', function(obj){
            var data = obj.data;
            var src = (data.photo?"data:image/png;base64,"+data.photo:"../layui/img/notfond.png");

            var ss ="<div class=\"layui-row\">" +
                "    <div class=\"layui-col-xs6\">" +
                "<form class=\"layui-form\">" +
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">姓名:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.userName+"</button>\n" +
                "    </div>\n" +
                "  </div>" +
                // "  <div class=\"layui-form-item\">\n" +
                // "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                // "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">卡号:</button>\n" +
                // "      <button  class=\"layui-btn layui-btn-primary\">"+ data.cardID+"</button>\n" +
                // "    </div>\n" +
                // "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">部门:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.company+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">门禁位置:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.name+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" >进场时间:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.inTime+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "</form>"+
                "    </div>" +
                "    <div class=\"layui-col-xs6\"><img  width=200  src=\""+src+"\"/>"+
                "    </div>" +
                "</div>";
            layer.open({
                type: 1 //Page层类型
                ,area: ['700px', '500px']
                ,shade: 0.6 //遮罩透明度
                ,content: ss
            });
        });

        // 承包商
      var numberOfContractor=  table1.render({
            elem: '#test1',
          id:'test1'
          ,title: '装置'
            ,url:'/device'
            ,height: leftTableHeight
          ,loading: false
          ,cols: [[{field:'userName',width:TableinnerWidth/4, align:"center",title: '用户名'}
              ,{field:'company', width:TableinnerWidth/4, align:"center",title: '部门'}
              ,{field:'inTime', width:TableinnerWidth/4,align:"center",title: '入场时间'}
              ,{field:'name', width:TableinnerWidth/4,align:"center",title: '门禁位置'}
            ]],page: false
          ,
          done: function (res, curr, count) {// 表格渲染完成之后的回调
              $.each(res.data, function(i, val) {
                  if(val.intervals >= initval ) {		//此处写你自己的判断条件
                      $('tr[data-index="' + i + '"]').addClass('reportAnEmergency-color');
                  }
              });
          }
          ,even:true
          ,response: {
            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
        }
           ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 200, //解析接口状态
                    "msg": '', //解析提示文本
                    "count": 10, //解析数据长度
                    "data": res //解析数据列表
                };
        }
        });
        var $ = layui.$, test1active = {
            reload: function(){
                var demoReload = $('#test1demoReload');

                //执行重载
                table1.reload('test1', {
                    where: {
                        userNoOrUsername:
                            demoReload.val()
                    }
                });
            }
        };

        $(' .test1demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            test1active[type] ? test1active[type].call(this) : '';
        });

        //监听行单击事件（双击事件为：rowDouble）
        table1.on('rowDouble(test1)', function(obj){
            var data = obj.data;
            var src = (data.photo?"data:image/png;base64,"+data.photo:"../layui/img/notfond.png");

            var ss ="<div class=\"layui-row\">" +
                "    <div class=\"layui-col-xs6\">" +
                "<form class=\"layui-form\">" +
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">姓名:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.userName+"</button>\n" +
                "    </div>\n" +
                "  </div>" +
                // "  <div class=\"layui-form-item\">\n" +
                // "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                // "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">卡号:</button>\n" +
                // "      <button  class=\"layui-btn layui-btn-primary\">"+ data.cardID+"</button>\n" +
                // "    </div>\n" +
                // "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">部门:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.company+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">门禁位置:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.name+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" >进场时间:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.inTime+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "</form>"+
                "    </div>" +
                "    <div class=\"layui-col-xs6\"><img  width=200  src=\""+src+"\"/>"+
                "    </div>" +
                "</div>";
            layer.open({
                type: 1 //Page层类型
                ,area: ['700px', '500px']
                ,shade: 0.6 //遮罩透明度
                ,content: ss
            });
        });

      var numberOfRightVisit=  table3.render({
            elem: '#test3',
            id: 'test3'
            ,url:'/restArea'
          ,title: '承包商休息区'
          ,loading: false
            ,height:  leftTableHeight
          ,cols: [[{field:'userName',width:TableinnerWidth/4,align:"center", title: '用户名'}
              ,{field:'company', width:TableinnerWidth/4, align:"center",title: '部门'}
              ,{field:'inTime', width:TableinnerWidth/4,align:"center",title: '入场时间'}
              ,{field:'name', width:TableinnerWidth/4,align:"center",title: '门禁位置'}
          ]],page: false,
          even:true,
          done: function (res, curr, count) {// 表格渲染完成之后的回调
              $.each(res.data, function(i, val) {
                  if(val.intervals >= initval ) {		//此处写你自己的判断条件
                      $('tr[data-index="' + i + '"]').addClass('reportAnEmergency-color');
                  }
              });
          }
          ,response: {
            statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
        }
           ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
            return {
                "code": 200, //解析接口状态
                "msg": '', //解析提示文本
                "count": res.length, //解析数据长度
                "data": res //解析数据列表
            };
        }
        });

        var $ = layui.$, test3active = {
            reload: function(){
                var demoReload = $('#test3demoReload');

                //执行重载
                table3.reload('test3', {
                    where: {
                        userNoOrUsername:
                            demoReload.val()
                    }
                });
            }
        };

        $(' .test3demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            test3active[type] ? test3active[type].call(this) : '';
        });
        table3.on('rowDouble(test3)', function(obj){
            var data = obj.data;
            var src = (data.photo?"data:image/png;base64,"+data.photo:"../layui/img/notfond.png");

            var ss ="<div class=\"layui-row\">" +
                "    <div class=\"layui-col-xs6\">" +
                "<form class=\"layui-form\">" +
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">姓名:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.userName+"</button>\n" +
                "    </div>\n" +
                "  </div>" +
                // "  <div class=\"layui-form-item\">\n" +
                // "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                // "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">卡号:</button>\n" +
                // "      <button  class=\"layui-btn layui-btn-primary\">"+ data.cardID+"</button>\n" +
                // "    </div>\n" +
                // "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">部门:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.company+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" lay-filter=\"demo1\">门禁位置:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.name+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "  <div class=\"layui-form-item\">\n" +
                "    <div class=\"layui-input-block\" style='margin-left: 0px'>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\" >进场时间:</button>\n" +
                "      <button  class=\"layui-btn layui-btn-primary\">"+ data.inTime+"</button>\n" +
                "    </div>\n" +
                "  </div>"+
                "</form>"+
                "    </div>" +
                "    <div class=\"layui-col-xs6\"><img  width=200  src=\""+src+"\"/>"+
                "    </div>" +
                "</div>";
            layer.open({
                type: 1 //Page层类型
                ,area: ['700px', '500px']
                ,shade: 0.6 //遮罩透明度
                ,content: ss
            });
        });

        function callBack(){
            peopleCounting()
            numberOfEmployeestable.reload({ });
            numberOfContractor.reload({ });
            numberOfRightVisit.reload({ });


        }
        $("#exportExceTotal").on('click', function(){
            window.open("/exportExcel");
        });
        function peopleCounting() {
            $.get("/peopleCounting", function (res) {
                console.log(res)
                $("#cobEmployees")[0].innerHTML=res.cobEmployees;
                $("#cobContractor")[0].innerHTML=res.cobContractor;
                $("#cobTotol")[0].innerHTML=res.cobTotol;
                $("#contractorContractor")[0].innerHTML=res.contractorContractor;
                $("#contractorEmployees")[0].innerHTML=res.contractorEmployees;
                $("#ontractorTotol")[0].innerHTML=res.ontractorTotol;
                $("#plantContractor")[0].innerHTML=res.plantContractor;
                $("#plantEmployees")[0].innerHTML=res.plantEmployees;
                $("#plantTotol")[0].innerHTML=res.plantTotol;
                $("#totol")[0].innerHTML=res.totol;
            })
        }
        setInterval(function(){ callBack() }, 60000);
    });


</script>
</body>
</html>